<template>
  <!-- 家庭成员 -->
  <el-dialog title="家庭成员" :visible="value" width="500px" custom-class="dialog-box" @close="onClose" @open="onOpen" :close-on-click-modal="false" :append-to-body="true">
    <el-form @submit.native.prevent="onSubmit" label-width="100px" label-position="top" ref="form" :model="form" :rules="rules">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="成员关系：" prop="relation">
            <el-select v-model="form.relation">
              <el-option v-for="(item,index) in relationEnum" :key="index" :label="item.desc" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="姓名：" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="性别：" prop="sex">
            <el-radio-group v-model="form.sex">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="2">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出生年月：" prop="birthday">
            <el-date-picker v-model="form.birthday" :picker-options="pickerOptions" value-format="yyyy-MM-dd" type="date" @blur="onGetAge"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="手机号：" prop="mobile">
            <el-input v-model="form.mobile"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="年龄：" prop="age">
            <el-input v-model.number="form.age" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-button v-show="false" :loading="btnLoading" native-type="submit"></el-button>
    </el-form>
    <span slot="footer">
      <el-button type="primary" :loading="btnLoading" @click="onSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import validate from "@/_js/validate.js";
export default {
  props: ["value"],
  data() {
    return {
      btnLoading: false,
      relationEnum: [],
      form: {
        relation: "",
        name: "",
        sex: "",
        birthday: "",
        age: "",
        mobile: "",
        openId: ""
      },
      rules: {
        relation: [{ required: true, message: "此项必填", trigger: "change" }],
        name: [{ required: true, message: "此项必填", trigger: "blur" }],
        sex: [{ required: true, message: "此项必填", trigger: "change" }],
        birthday: [{ required: true, message: "此项必填", trigger: "blur" }],
        mobile: [
          { required: true, message: "此项必填", trigger: "blur" },
          { validator: validate.vPhone, trigger: "blur" }
        ]
      },
      pickerOptions: {
        disabledDate(date) {
          let d = new Date();
          if (d.getTime() < date.getTime()) return true;
          else return false;
        }
      }
    };
  },
  created() {
    let th = this;
    th.getCommonConfigByKey("患者关系").then(res => {
      th.relationEnum = res;
    });
  },
  methods: {
    onGetAge() {
      let th = this;
      th.form.age = th.$utils.getAgeToBirthday(th.form.birthday);
    },
    onSubmit() {
      let th = this;
      let fn = () => {
        let j = {};
        Object.assign(j, th.form);
        th.$emit("success", j);
        th.onClose();
      };
      th.$refs["form"].validate(v => {
        if (v) {
          fn();
        }
      });
    },
    onOpen() {},
    onClose() {
      let th = this;
      th.$refs["form"].resetFields();
      th.$emit("input", false);
    }
  }
};
</script>
